<template>	
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="客户行业分类"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>	
</template>

<script>
	import {getIndustryNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},				
		data() {
			return {
				option: null,
				color: ['#00ffff', '#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',],
				dataList: [],
				trafficWay : [],
                angle:0,
                a:338,
                b:257,
                total:0
			}

		},
		mounted() {
			this.initData()
			this.init()			
            let that=this
			setInterval(function() {			   
			    that.draw()
			    that.init()
			}, 100);			
			
		},
		methods: {
			draw(){
               this.angle = this.angle+3
            },
			getCirlPoint(x0, y0, r, angle) {
			    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
			    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
			    return {
			        x: x1,
			        y: y1
			    }
			},			
			initData() {
				getIndustryNum().then(res=>{				
					this.trafficWay=res.data.data
					for(var i = 0; i < this.trafficWay.length; i++) {
						this.total += Number(this.trafficWay[i].num);
						this.dataList.push({
							value: Number(this.trafficWay[i].num),
							name: this.trafficWay[i].type,
							itemStyle: {
								normal: {
									borderWidth: 5,
					                shadowBlur: 20,
					                borderColor:this.color[i],
					                shadowColor: this.color[i]
								}
							}
						}, {
							value: 2,
							name: '',
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: false
									},
									color: 'rgba(0, 0, 0, 0)',
									borderColor: 'rgba(0, 0, 0, 0)',
									borderWidth: 0
								}
							}
						});
					}					
				})	
			},
			init() {
				let that=this
				var seriesOption = [{
						name: "ring5",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(that.a, that.b) / 2 * 0.6,
									startAngle: (0 + that.angle) * Math.PI / 180,
									endAngle: (90 + that.angle) * Math.PI / 180
								},
								style: {
									stroke: "#0CD3DB",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						name: "ring5",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(that.a, that.b) / 2 * 0.6,
									startAngle: (180 + that.angle) * Math.PI / 180,
									endAngle: (270 + that.angle) * Math.PI / 180
								},
								style: {
									stroke: "#0CD3DB",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						name: "ring5",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(that.a, that.b) / 2 * 0.65,
									startAngle: (270 + -that.angle) * Math.PI / 180,
									endAngle: (40 + -that.angle) * Math.PI / 180
								},
								style: {
									stroke: "#0CD3DB",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						name: "ring5",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(that.a, that.b) / 2 * 0.65,
									startAngle: (90 + -that.angle) * Math.PI / 180,
									endAngle: (220 + -that.angle) * Math.PI / 180
								},
								style: {
									stroke: "#0CD3DB",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					}, {
						name: "ring5",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							let x0 = api.getWidth() / 2;
							let y0 = api.getHeight() / 2;
							let r = Math.min(that.a, that.b) / 2 * 0.65;
							let point = that.getCirlPoint(x0, y0, r, (90 + -that.angle))
							return {
								type: 'circle',
								shape: {
									cx: point.x,
									cy: point.y,
									r: 4
								},
								style: {
									stroke: "#0CD3DB", //粉
									fill: "#0CD3DB"
								},
								silent: true
							};
						},
						data: [0]
					}, {
						name: "ring5", //绿点
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							let x0 = api.getWidth() / 2;
							let y0 = api.getHeight() / 2;
							let r = Math.min(that.a, that.b) / 2 * 0.65;
							let point = that.getCirlPoint(x0, y0, r, (270 + -that.angle))
							return {
								type: 'circle',
								shape: {
									cx: point.x,
									cy: point.y,
									r: 4
								},
								style: {
									stroke: "#0CD3DB", //绿
									fill: "#0CD3DB"
								},
								silent: true
							};
						},
						data: [0]
					},

					{
						name: '',
						type: 'pie',
						clockWise: false,
						radius: [105, 109],
						hoverAnimation: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'outside',
									// color: '#ddd', 不写就是对应的图例颜色
									formatter: function(params) {
										var percent = 0;
										percent = ((params.value / that.total) * 100).toFixed(0);
										if(params.name !== '') {
											return params.name + percent + '%';
										} else {
											return '';
										}
									},
								},
								labelLine: {
									length: 10,
									length2: 15,
									show: true,
									color: '#00ffff'
								}
							}
						},
						data: this.dataList
					}
				]
				this.option = {
					color: this.color,
					title: {
						text: '客户行业分类',
						top: '48%',
						textAlign: "center",
						left: "49%",
						textStyle: {
							color: '#fff',
							fontSize: 18,
							fontWeight: '400'
						}
					},

					tooltip: {
						show: false
					},
					legend: {
						show:false,
						icon: "circle",
						orient: 'horizontal',
						
						data: ['火车', '飞机', '客车', '轮渡'],
						left: 340,
						top: 10,
						align: 'right',
						textStyle: {
							color: "#fff"
						},
						itemGap: 10
					},
					toolbox: {
						show: false
					},
					series: seriesOption
				}
			}
		}
	}
</script>